大家安安 晚上好~~

今天要把專案裡的StatelessWidget 更改成為 StatefulWidget
我想要加入點讚的功能去計算我的寵物的讚數

首先我們先加入按讚的按鈕
及顯示的的讚數

程式碼的部分則加入一段

IconButton(
    onPressed: () => {
        pet.likes++
    },
    icon: Icon(
          Icons.thumb_up,
          color: Colors.blue,
          ),
       ),
    ]),
SizedBox(
    height: 16.0,
),
Text(
    'Likes:${pet.likes}',
    style: TextStyle(color: Colors.blue, fontSize: 26.0),
),

但是這樣的話點擊了讚的按鈕並不會+1

所以我們改成 StatefulWidget來讓點擊時能夠+1

class Petdialog extends StatefulWidget {
  Petdialog({Key key, this.pet}) : super(key: key);
  final Pet pet;
  @override
  State<StatefulWidget> createState() => _DialogState();
}

class _DialogState extends State<Petdialog> {
  @override
  Widget build(BuildContext context) {
    ThemeData localTheme = Theme.of(context);
    return SimpleDialog(
      contentPadding: EdgeInsets.zero,
      children: [
        Image.network(widget.pet.imageUrl, fit: BoxFit.fill),
        Padding(
          ...
          child: Column(
            ...
            children: [
              ...
              Row(children: [
              ...
                IconButton(
                  onPressed: () => {
                    setState(() => {widget.pet.likes++})
                  },
                ...
    );
  }
}

hotReload 一下

可以看到 讚數成功變更了
但是發現了位於Parent Widget(圖片畫面左上角)的讚數卻沒變更

所以我們又要來修改一下程式碼

class Petdialog extends StatefulWidget {
  Petdialog({Key key, this.pet, @required this.notifyParent}) : super(key: key);
  final Function() notifyParent;
 ...
}
...

       IconButton(
                  onPressed: () => {
                    setState(() => {widget.pet.likes++, widget.notifyParent()})
                  },
                  icon: Icon(
                    Icons.thumb_up,
                    color: Colors.blue,
                  ),
                ),
                ....

class _MyPetState extends State<MyPet> {
  refresh() {
    setState(() {});
  }
  Widget _dialogBuilder(BuildContext context, Pet pet) {
    return Petdialog(
      pet: pet,
      notifyParent: refresh,
    );
  }
  ....

MyPet也改成StatefulWidget
並傳入callbackfn 去更改 清單上的讚數

成功的把讚數binding起來

詳細程式碼可以到我的GitHub上
點此連結

好拉下一篇就會講解 InheritedWidget 是甚麼?
大家ㄅㄅ